<template>
  <div class="title-icon">
    <a-tooltip>
      <template slot="title"> 菜单搜索 </template>
      <a-icon type="search" class="iconStyle" @click="getTreeData"/>
    </a-tooltip>
    <a-modal v-model="modal1Visible" :footer="null" :dialog-style="dialogStyle">
      <a-tree-select  class="selectStyle" v-model="selectTree" placeholder="请输入菜单名称或菜单拼音首字母" :dropdown-style="dropdownStyle"  @change="onChange" allowClear :filterTreeNode='onSearch' treeNodeFilterProp="name" show-search >
        <a-tree-select-node v-for="(ele, i) in treeData" :key="i" :value="ele.name" :title="ele.name" :disabled='ele.hasChildren===true||ele.hasParent===true'>
          <a-tree-select-node v-for="val in ele.children" :key="val.name" :value="val.name" :title="val.name">
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select>
    </a-modal>
  </div>
</template>
<script>
import PinyinMatch from 'pinyin-match'

export default {
  name: 'searchIcon',
  data () {
    return {
      modal1Visible: false,
      selectTree: undefined,
      dialogStyle: {
        top: '20px',
        right: '-28%'
      },
      dropdownStyle: {
        maxHeight: '200px',
        overflow: 'auto'
      },
      treeData: [],
      userMenu: JSON.parse(window.localStorage.getItem('USER_ROUTER'))[0]
    }
  },
  methods: {
    getTreeData () {
      this.modal1Visible = true
      this.treeData = this.userMenu.children
    },
    jumpPath (pathUrl) {
      this.$router.push({ path: pathUrl })
      this.selectTree = undefined
      this.modal1Visible = false
    },
    onChange (value) {
      this.treeData.forEach(i => {
        if (value === i.name) {
          this.jumpPath(i.path)
        }
        if (i.children === undefined) {
          i.children = []
        }
        i.children.forEach(j => {
          if (value === j.name) {
            this.jumpPath(j.path)
          }
        })
      })
    },
    onSearch (inputValue, treeNode) {
      let aName = PinyinMatch.match(treeNode.data.props.title, inputValue)
      return aName
    }
  }
}
</script>
<style lang='less' scoped>
.title-icon {
  display: inline-block;
  .iconStyle {
    cursor: pointer;
    font-size: 20px;
    position: relative;
    top: 4px;
  }
}
/deep/.ant-select-tree-node-content-wrapper span {
    color: rgba(0, 0, 0, 0.65) !important;
  }
/deep/ .ant-modal-content {
  .ant-modal-body {
    .selectStyle {
      width:90%;
      .ant-select-selection {
        border-radius: 20px !important;
      }
    }
  }
  }
</style>
